<!-- 
	版本声明：
	* 由于 WanlLive、WanlChat、以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
	* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考借鉴
	* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任 
	* 深圳前海万联科技有限公司 @www.i36k.com
-->
<template>
	<view class="wanl-live-footer">
		<view class="wanl-live-footer-bottom_msg">
			<input type="text" v-if="state == 1" class="wanl-live-footer-bottom_msg_input" confirm-type="send"
				v-model="message" @confirm="send('msg')" placeholder-style="rgba(255, 255, 255, .8)"
				placeholder-class="wanl-live-footer-bottom_msg_input-placeholder" placeholder="问什么都告诉你~" />
		</view>
		<!-- H5 页面需要发送按钮 -->
		<!-- #ifndef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS -->
		<view class="wanl-live-footer-bottom_send" v-if="state == 1">
			<view class="wanl-live-footer-bottom_send-btn" @tap="send('msg')">
				<text class="wanl-live-footer-bottom_send-btn-text">发送</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- 购物袋 -->
		<!-- <view class="wanl-live-footer-bottom_controll"> </view> -->
		<view class="wanl-live-footer-bottom_goods" @tap="popup('open')">
			<view class="wanl-btn wanl-btn-transpare">
				<!-- <text class="wanl-btn-text wanl-live-footer-bottom_goods-btn-text">&#xe87f;</text> -->
				<image class="wanl-btn-image" src="/static/images/live/shop.png" />
				<view class="wanl-btn-tag" v-if="goods.length != 0">
					<text class="wanl-btn-tag-text">{{numFormat(goods.length)}}</text>
				</view>
			</view>
		</view>
		<!-- 发送点赞 -->
		<view class="wanl-live-footer-bottom_praise" @tap="send('like')" v-if="state == 1">
			<view class="wanl-btn">
				<text class="wanl-btn-text wanl-live-footer-bottom_praise-btn-text">&#xe635;</text>
				<view class="wanl-btn-tag" v-if="like != 0">
					<text class="wanl-btn-tag-text">{{numFormat(like)}}</text>
				</view>
			</view>
		</view>
		<!-- 弹出窗口 -->
		<uni-popup ref="goods" type="bottom">
			<view class="wanl-live-popup">
				<view class="wanl-live-popup-title">
					<text class="wanl-live-popup-title-text">共 {{goods.length}} 件商品</text>
					<text class="wanl-live-popup-title-close-text" @tap="popup('close')">&#xe66b;</text>
				</view>
				<scroll-view scroll-y="true" class="wanl-live-popup-list">
					<view class="wanl-live-popup-list-item" v-for="(item, index) in goods" :key="item.id">
						<view class="wanl-live-popup-list-item-img">
							<image :src="stcOss(item.image)" class="wanl-live-popup-list-item-image"></image>
						</view>
						<view class="wanl-list-tag" :class="['tagbg_' + (index + 1)]">
							<text class="wanl-list-tag-text">{{index + 1}}</text>
						</view>
						<view class="wanl-live-popup-list-item-subject">
							<view class="wanl-live-popup-list-item-subject-title">
								<text class="wanl-live-popup-list-item-subject-title-text">{{item.title}}</text>
							</view>
							<view class="wanl-live-popup-list-item-subject-operation">
								<view class="wanl-live-popup-list-item-subject-operation-price">
									<text
										class="wanl-live-popup-list-item-subject-operation-price-text">${{item.price}}</text>
								</view>
								<view class="wanl-live-popup-list-item-subject-operation-button">
									<view class="wanl-live-popup-list-item-subject-operation-button-seek"
										@tap="send('seek',index + 1)" v-if="state == 1">
										<text
											class="wanl-live-popup-list-item-subject-operation-button-seek-text">求讲解</text>
									</view>
									<view class="wanl-live-popup-list-item-subject-operation-button-shopping"
										@tap="goods(item.id)">
										<text
											class="wanl-live-popup-list-item-subject-operation-button-shopping-text">&#xe636;</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 多终端兼容性 -->
				<view :style="{height: statusFootHeight + 'px'}"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "wanlLiveFooter",
		props: {
			statusFootHeight: {
				default: 0
			},
			like: {
				type: Number,
				default: 0
			},
			state: {
				default: 0
			},
			goods: {
				type: Array,
				default: () => []
			}
		},
		beforeCreate() {
			// #ifdef APP-NVUE
			var domModule = weex.requireModule('dom');
			domModule.addRule('fontFace', {
				fontFamily: 'iconfont',
				src: "url('/static/style/iconfont.ttf')"
			});
			// #endif
		},
		data() {
			return {
				message: ''
			};
		},
		methods: {
			// 操作弹出框
			popup(method) {
				this.$refs.goods[method]();
			},
			// 传递给live 消息
			send(type, index) {
				switch (type) {
					// 发送消息
					case 'msg':
						if (this.message) {
							this.$emit('change', {
								type: 'msg',
								message: this.message
							});
							this.message = '';
						}
						// 收起键盘
						uni.hideKeyboard();
						break;
						// 点赞
					case 'like':
						this.$emit('change', {
							type: 'like'
						});
						break;
						// 求讲解
					case 'seek':
						this.$emit('change', {
							type: 'seek',
							key: index
						});
						this.popup('close');
						break;
				}
			},
			goods(id) {
				uni.navigateTo({
					url: `/pages/product/goods?id=${id}`
				})
				this.popup('close');
			},
			stcOss(url) {
				let oss = this.$store.state.common.appUrl.oss;
				let image = '';
				if (url) {
					if ((/^(http|https):\/\/.+/.test(url))) {
						image = url;
					} else {
						image = oss + url;
					}
				} else {
					image = oss + '/assets/addons/wanlshop/img/common/img_default3x.png';
				}
				return image;
			},
			numFormat(num) {
				return num > 9999 ? ((num - num % 1000) / 10000 + 'w') : num
			}
		}
	};
</script>
<style>
	@import '@/static/style/wanlnvue.css';

	.wanl-live-footer {
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		padding-top: 18rpx;
		padding-bottom: 18rpx;
	}

	/* 消息按钮 */
	.wanl-live-footer-bottom_msg {
		/* #ifndef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS */
		flex: 3;
		/* #endif */
		/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || APP-PLUS */
		flex: 4;
		/* #endif */
		margin-left: 25rpx;
		margin-right: 25rpx;
	}

	.wanl-live-footer-bottom_msg_input {
		height: 76rpx;
		background-color: rgba(0, 0, 0, .2);
		border-radius: 100px;
		color: #fff;
		padding-left: 25rpx;
		padding-right: 25rpx;
		font-size: 28rpx;
	}

	.wanl-live-footer-bottom_msg_input-placeholder {
		color: #FFFFFF;
	}

	/* 发送按钮 */
	.wanl-live-footer-bottom_send {
		flex: 1;
		align-items: flex-start;
	}

	.wanl-live-footer-bottom_send-btn {
		background-color: #f02b57;
		border-radius: 100px;
		height: 50rpx;
		width: 100rpx;
		justify-content: center;
		align-items: center;
	}

	.wanl-live-footer-bottom_send-btn-text {
		color: #ffffff;
		font-size: 28rpx;
	}


	/* 进度条 */
	.wanl-live-footer-bottom_controll {
		justify-content: center;
		align-items: center;
		color: #fff;
		flex: 4;
		z-index: 100;
		position: relative;
		height: 76rpx;
		line-height: 76rpx;
	}

	.wanl-live-footer-bottom_controll-play {
		width: 76rpx;
		height: 76rpx;
		position: relative;
	}

	/* 商品 */
	.wanl-live-footer-bottom_goods {
		position: relative;
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	/* 购物袋颜色 */
	.wanl-live-footer-bottom_goods-btn-text {
		color: #327CFF;
		font-size: 56rpx;
	}

	/* 点赞 */
	.wanl-live-footer-bottom_praise {
		position: relative;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	.wanl-live-footer-bottom_praise-btn-text {
		color: #fff;
		font-size: 41rpx;
	}

	/* POPUP */
	.wanl-live-popup {
		position: relative;
		background: rgba(255, 255, 255, 0.93);
		padding-left: 18rpx;
		padding-right: 18rpx;
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
	}

	.wanl-live-popup-title {
		height: 100rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.wanl-live-popup-title-text {
		font-size: 32rpx;
	}

	.wanl-live-popup-title-close-text {
		font-size: 32rpx;
		/* #ifndef APP-PLUS */
		font-family: "iconfont";
		/* #endif*/
		font-family: iconfont;
		width: 40rpx;
		height: 40rpx;
	}

	.wanl-live-popup-list {
		/* #ifdef APP-PLUS */
		height: 690rpx;
		/* #endif */

		/* #ifdef H5 || MP */
		max-height: 1000rpx;
		min-height: 200rpx;
		/* #endif */
	}

	.wanl-live-popup-list-item {
		position: relative;
		flex-direction: row;
		background: #fff;
		padding-left: 18rpx;
		padding-right: 18rpx;
		padding-top: 18rpx;
		padding-bottom: 18rpx;
		margin-bottom: 18rpx;
		border-radius: 18rpx
	}

	.wanl-live-popup-list-item-img {
		width: 180rpx;
		height: 180rpx;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		background-color: #f7f7f7;
		margin-right: 20rpx;
	}

	.wanl-live-popup-list-item-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 18rpx;
	}

	.wanl-live-popup-list-item-subject {
		flex: 1;
		justify-content: space-between;
	}

	.wanl-live-popup-list-item-subject-title {
		/* #ifdef MP || H5 */
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* #endif */
	}

	.wanl-live-popup-list-item-subject-title-text {
		color: #222222;
		font-size: 28rpx;
		lines: 2;
		text-overflow: ellipsis;
		/* #ifdef APP-PLUS */
		line-height: 36rpx;
		/* #endif */
	}

	.wanl-live-popup-list-item-subject-operation {
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}

	.wanl-live-popup-list-item-subject-operation-price {}

	.wanl-live-popup-list-item-subject-operation-price-text {
		color: #f72b36;
		font-size: 32rpx;
		font-weight: 500;
	}

	.wanl-live-popup-list-item-subject-operation-button {
		flex-direction: row;

	}

	.wanl-live-popup-list-item-subject-operation-button-seek {
		margin-right: 18rpx;
		border-radius: 100px;
		justify-content: center;
		align-items: center;
		height: 54rpx;
		width: 130rpx;
		border-left: 2rpx solid #6200ff;
		border-right: 2rpx solid #6200ff;
		border-top: 2rpx solid #6200ff;
		border-bottom: 2rpx solid #6200ff;
	}

	.wanl-live-popup-list-item-subject-operation-button-seek-text {
		color: #6200ff;
		font-size: 27rpx;
	}

	.wanl-live-popup-list-item-subject-operation-button-shopping {
		background-color: #f72b36;
		border-radius: 100px;
		justify-content: center;
		align-items: center;
		width: 54rpx;
		height: 54rpx;
	}

	.wanl-live-popup-list-item-subject-operation-button-shopping-text {
		font-size: 30rpx;
		color: #fff;
		/* #ifndef APP-PLUS */
		font-family: "iconfont";
		/* #endif*/
		font-family: iconfont;
	}
</style>